<template>
  <div class="sales-board">
    <div class="sales-board-intro">
      <h2>广告发布</h2>
      <p>
        广告活动按照广告计划执行，到完成广告创作并形成广告作品之后，经过广告主的最后审核同意，即可送到预定的媒介发布刊播。这项工作一般由媒介部门的有关专业人员负责，他们的任务就是专门负责与有关媒介单位接洽，安排有关广告的发播事宜，并对发播质量实施监督。
      </p>
    </div>
    <div class="sales-board-form">
      <div class="sales-board-line">
        <div class="sales-board-line-left">2购买数量：</div>
        <div class="sales-board-line-right">
          <counter
            :max="100"
            :min="25"
            @on-change="num('buyNum', $event)"
          ></counter>
        </div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">2行业：</div>
        <div class="sales-board-line-right">
          <v-selection
            :selections="tradeList"
            @on-change="onbuyType('buyType', $event)"
          ></v-selection>
        </div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">2产品版本：</div>
        <div class="sales-board-line-right">
          <v-mul-chooser
            :selections="versionList"
            @on-change="onParamChange('versions', $event)"
          ></v-mul-chooser>
        </div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">2有效时间：</div>
        <div class="sales-board-line-right">半年</div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">2总价：</div>
        <div class="sales-board-line-right">500 元</div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">&nbsp;</div>
        <div class="sales-board-line-right">
          <div class="button" @click="to">立即购买</div>
          <button @click="switchs">switch</button>
        </div>
      </div>
      <!-- //购买提示页 -->
      <v-success :is-show="isShowPayDialog" @on-close="hidePayDialog">
        <table class="buy-dialog-table">
          <tr>
            <th>购买数量</th>
            <th>行&nbsp;业</th>
            <th>有效时间</th>
            <th>产品版本</th>
            <th>总价</th>
          </tr>
          <tr>
            <td>{{ buyNum }}</td>
            <td>{{ buyType.label }}</td>
            <td>半年</td>
            <td>
              {{ versions.label }}
            </td>
            <td>500</td>
          </tr>
        </table>
        <h3 class="buy-dialog-title">请选择银行</h3>
        <p>银行1</p>
        <!-- <bank-chooser @on-change="onChangeBanks"></bank-chooser> -->
        <div class="button buy-dialog-btn" @click="confirmBuy">确认购买</div>
      </v-success>
    </div>
    <div class="echarts">
      <example style="height: 310px" />
    </div>
    <div class="sales-board-dess">
      <h2>filters过滤器：</h2>
      <p>
        只要用于对数据内容的格式化 主要是可以用双大括号
        和v-bind中使用，filters是需要传递参数的，默认的是前面的值就是参数
        如果设置了其他参数 他们则是第二个第三个参数
      </p>
      <p>
        用法：<!-- 在双花括号中 -->{ { shopid | formatid}} / /<!-- 在 `v-bind` 中 -->
        v-blind:id="shopid | formatid"
      </p>
      <p>{{ time }}</p>
      <p>filters过滤器处理时间：;{{ filterstime | timeStyle }}</p>
    </div>
  </div>
</template>

<script>
import VSelection from "./selection";
import Counter from "./counter";
import VMulChooser from "./multiplyChooser";
import VSuccess from "./success";
import Example from "../components/echarts/example";
export default {
  name: "publish",
  components: {
    VSelection,
    Counter,
    VMulChooser,
    VSuccess,
    Example,
  },
  data() {
    return {
      time: "2019-11-19T04:32:46Z",
      filterstime: "",
      buyNum: 25,
      buyType: { label: "出版业" },
      versions: {
        label: "初级版",
        value: 0,
      },
      price: 0,
      isShowPayDialog: false,

      tradeList: [
        {
          label: "出版业",
          value: 0,
        },
        {
          label: "媒体",
          value: 1,
        },
        {
          label: "金融",
          value: 2,
        },
        {
          label: "互联网",
          value: 3,
        },
        {
          label: "游戏",
          value: 4,
        },
      ],
      versionList: [
        {
          label: "初级版",
          value: 0,
        },
        {
          label: "中级版",
          value: 1,
        },
        {
          label: "高级版",
          value: 2,
        },
        {
          label: "专家版",
          value: 3,
        },
        {
          label: "资深版",
          value: 4,
        },
        {
          label: "变态版",
          value: 5,
        },
      ],
    };
  },
  filters: {
    timeStyle() {
      return String("2019-11-19T04:32:46Z").match(/.{10}/)[0];
    },
  },
  mounted() {
    // this.buyNum = 10;
  },
  methods: {
    switchs() {
      alert(Date())
      let x = 10;
      switch (x) {
        case 1: //=>在x等于1的情况下做什么
          x += 1;
          break; //=>每一种情况结束都要设置break（以供当此条件成立并处理完事情后，通知代码不在向下执行）
        case 5:
          x += 2;
          break;
        case 10: //=>'10'===10  FALSE
          x += 3;
          break;
        default:
          //=>等价于else，而且最后一个判断结束无需设置break
          x += 4;
      }
      console.log(x);
    },
    num(a, b) {
      this.buyNum = b;
    },
    onbuyType(a, b) {
      this.buyType.label = b.label;
    },
    onParamChange(attr, val) {
      console.log(attr);
      console.log(val);
    },
    to() {
      this.isShowPayDialog = true;
    },
    hidePayDialog() {
      this.isShowPayDialog = false;
    },
    confirmBuy() {
      alert("sdjh");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.sales-board {
  background: #fff;
}
.sales-board-intro h2 {
  font-size: 20px;
  padding: 20px;
}
.sales-board-intro p {
  background: #f7fcff;
  padding: 10px 20px;
  color: #999;
  line-height: 1.8;
}
.sales-board-form {
  width: 500px;
  float: left;
  height: 320px;
  border: 1px solid red;
  padding: 30px 20px;
  font-size: 14px;
}
.echarts {
  width: 1000px;
  height: 340px;
  float: left;
  padding-top: 40px;
  margin-left: 50px;
  box-sizing: content-box;
  border: 1px solid rgb(255, 0, 200);
}
.sales-board-line {
  clear: both;
  padding-bottom: 20px;
}
.sales-board-line-left {
  display: inline-block;
  width: 100px;
}
.sales-board-line-right {
  display: inline-block;
  width: 75%;
}

.sales-board-table {
  width: 100%;
  margin-top: 20px;
}
.sales-board-table th {
  background: #4fc08d;
  color: #fff;
}
.sales-board-table td {
  border: 1px solid #f0f2f5;
  padding: 15px;
}
.sales-board-line {
  clear: both;
  padding-bottom: 20px;
}
.sales-board-line-left {
  display: inline-block;
  width: 100px;
}
.sales-board-line-right {
  display: inline-block;
  width: 75%;
}
.button {
  background: #4fc08d;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}
.button:hover {
  background: #4fc08d;
}

.buy-dialog-table {
  width: 100%;
  margin-bottom: 20px;
}
.buy-dialog-table td,
.buy-dialog-table th {
  border: 1px solid #e3e3e3;
  text-align: center;
  padding: 5px 0;
}
.buy-dialog-table th {
  background: #4fc08d;
  color: #fff;
  border: 1px solid #4fc08d;
}
.sales-board-dess {
  clear: both;
  border-top: 20px solid #f0f2f5;
  padding: 15px 20px;
}
</style>
